<template>
  <view class="c-navbar" :class="{ 'c-navbar-new': showNavbar }">
    <view
      class="navbar"
      :class="{ 'navbar-fixed': fixed }"
      :style="[
        ($platform == 'android' ? 'height:' + titleBarHeight : '',
        showNotFixedBgColor
          ? bgrColorDefault != '#ffffff'
            ? 'background:' + bgrColorDefault
            : 'background:' + bgrColor
          : '')
      ]"
    >
      <view class="navbar-content">
        <view class="page-name fw700" :class="titleClass">
          <slot name="name">
            <view class="ell fs34">
              {{ title }}
            </view>
          </slot>
        </view>
        <view class="button-box" :class="[buttonBox]">
          <slot name="left">
            <view class="" @click="goBack()">
              <server-image class="img48" name="20230324021.png" mode="aspectFill" />
            </view>
          </slot>
          <slot name="right"></slot>
        </view>
      </view>
    </view>
    <view
      v-if="fixed"
      class="navbar-bg navbar-fixed"
      :style="
        bgrColorDefault != '#ffffff' ? 'background:' + bgrColorDefault : 'background:' + bgrColor
      "
    ></view>
    <view v-if="fixed" class="navbar-placeholder"></view>
  </view>
</template>

<script>
import config from '@/common/config.js';
export default {
  name: 'c-navbar',
  props: {
    fixed: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    bgrColorDefault: {
      type: String,
      default: '#ffffff',
    },
    bgrColor: {
      type: String,
      default: '#ffffff',
    },
    showNavbar: {
      type: Boolean,
      default: false,
    },
    titleClass: {
      type: String,
      default: 'color22',
    },
    // 左右按鈕樣式
    buttonBox: {
      type: String,
      default: 'zIndex3',
    },
    // 显示非Fixed背景
    showNotFixedBgColor: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      statusBarHeight: 0, //状态栏初始化
      titleBarHeight: 44, //标题栏初始化
    };
  },
  created() {
    // #ifdef APP-PLUS
    var that = this;
    uni.getSystemInfo({
      success: function (res) {
        console.log('getSystemInfo', res);
        // model设备型号
        // iOS
        // 标题栏高度
        if (res.model.indexOf('iPhone') !== -1) {
          that.titleBarHeight = 44 + 'px';
        } else {
          // android
          that.titleBarHeight = 48 + 'px';
        }

        if (that.showNavbar) {
          that.titleBarHeight += 10;
        }

        // 状态栏高度
        that.statusBarHeight = res.statusBarHeight + 'px';
      },
    });
    // #endif
  },
};
</script>

<style lang="less" scoped>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.navbar {
  height: 44px;
  position: relative;

  .navbar-content {
    height: 44px;
    position: relative;
  }

  .button-box {
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    // z-index: 3;
  }

  .page-name {
    height: 100%;
    position: absolute;
    // width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    //font-size: 17px;
    // font-weight: 500;
    // z-index: 2;

    font-weight: 600;
    z-index: 4;
    left: 70px;
    right: 70px;
  }
}

.return-icon {
  width: 18px;
  height: 18px;
}

.navbar-fixed {
  position: fixed;
  width: 100%;
  max-width: 420px;
  z-index: 998;
}

.navbar-placeholder {
  height: 44px;
}

.navbar-bg {
  height: 44px;
  z-index: 1;
}

.c-navbar-new {
  .navbar,
  .navbar-placeholder,
  .navbar-content,
  .navbar-bg {
    height: 44px;
    line-height: 44rpx;
  }
}

/* #ifdef APP-PLUS */
.navbar,
.navbar-bg,
.navbar-placeholder {
  padding-top: var(--status-bar-height);
}
/* #endif */
</style>
